<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <!--    顶部导航-->
    <link rel="shortcut ico" href="./favicon.ico" type="imge/x-icon">

    <!--    先重置-->
    <link rel="stylesheet" href="./css/reset.css">
    <!--    再引入-->
    <link rel="stylesheet" href="./css/index.css">

</head>
<body>
<!--顶部导航条-->
<div class="topBar">
    <!--    版心-->
    <div class="container">
        <!--        左侧欢迎区-->
        <div class="welcome leftfix">
            <span class="hello">尚品汇欢迎您</span>
            <span>请</span>
            <a class="login">登录</a>
            <a class="register">免费注册</a>
        </div>
        <!--        右侧导航-->
        <div class="topBar-nav rightfix">
            <ul class="list clearfix">
                <li><a href="#">我的订单</a></li>
                <li><a href="#">我的购物车</a></li>
                <li><a href="#">我的尚品汇</a></li>
                <li><a href="#">尚品汇会员</a></li>
                <li><a href="#">企业采购</a></li>
                <li><a href="#">关注尚品汇</a></li>
                <li><a href="#">合作招商</a></li>
                <li><a href="#">商家后台</a></li>
            </ul>
        </div>

    </div>
</div>


<!--    头部-->
<div class="header">
    <div class="container clearfix">
        <!--        左侧logo-->
        <div class="leftfix logo"><img src="./images/logo.png" alt="尚品汇"></div>
        <!--        右侧搜索-->
        <div class="rightfix search">
            <form action="#">
                <input type="text">
                <button></button>
            </form>

        </div>
    </div>
</div>
<!--主导航-->
<div class="main-nav">
    <div class="container clearfix">
        <div class="leftfix classify">全部商品分类</div>
        <div class="leftfix classes">
            <ul class="list clearfix">
                <li><a href="#">尚品超市</a></li>
                <li><a href="#">优惠券</a></li>
                <li><a href="#">买啥</a></li>
                <li><a href="#">尚品家电</a></li>
                <li><a href="#">尚品生鲜</a></li>
                <li><a href="#">PLUS会员</a></li>
                <li><a href="#">进口好物</a></li>
                <li><a href="#">品牌闪购</a></li>
                <li><a href="#">拍卖</a></li>
                <li><a href="#">五金商店</a></li>
            </ul>
        </div>
    </div>
</div>
<!--主导航-->

<!--内容区 侧边导航-->
<div class="content">
    <div class="container clearfix">
        <div class="left-content leftfix">
            <ul class="list">
                <li>
                    <a>手机</a>
                    <span>/</span>
                    <a>运营商</a>
                    <span>/</span>
                    <a>数码</a>

                    <!--   二级菜单,li有padding,子孙会让出padding从content开始-->
                    <div class="second-menu" >
                        <ul class="clearfix">
                            <li>
                                <a href="#">电子书刊</a>
                            </li>
                            <li><a href="#">电子书</a></li>
                            <li><a href="#">网络原创</a></li>
                            <li><a href="#">数字杂志</a></li>
                            <li><a href="#">多媒体图书</a></li>
                        </ul>

                        <ul class="clearfix">
                            <li><a href="#">音像</a></li>
                            <li><a href="#">音乐</a></li>
                            <li><a href="#">影视</a></li>
                            <li><a href="#">教育音像</a></li>
                        </ul>

                        <ul class="clearfix">
                            <li><a href="#">英文原版</a></li>
                            <li><a href="#">少儿</a></li>
                            <li><a href="#">商务投资</a></li>
                            <li><a href="#">英语学习考试</a></li>
                            <li><a href="#">文学</a></li>
                            <li><a href="#">传记</a></li>
                            <li><a href="#">励志</a></li>
                        </ul>

                        <ul class="clearfix">
                            <li><a href="#">文艺</a></li>
                            <li><a href="#">小说</a></li>
                            <li><a href="#">文学</a></li>
                            <li><a href="#">青春文学</a></li>
                            <li><a href="#">传记</a></li>
                            <li><a href="#">艺术</a></li>
                        </ul>


                        <ul class="clearfix">
                            <li><a href="#">少儿</a></li>
                            <li><a href="#">胎教</a></li>
                            <li><a href="#">0-2岁</a></li>
                            <li><a href="#">3-4岁</a></li>
                            <li><a href="#">6-7岁</a></li>
                            <li><a href="#">10-12岁</a></li>
                        </ul>


                        <ul class="clearfix">
                            <li><a href="#">人文社科</a></li>
                            <li><a href="#">历史</a></li>
                            <li><a href="#">哲学</a></li>
                            <li><a href="#">国学</a></li>
                            <li><a href="#">政治/军事</a></li>
                            <li><a href="#">法律</a></li>
                            <li><a href="#">人文社科</a></li>
                            <li><a href="#">心理学</a></li>
                            <li><a href="#">文学</a></li>
                            <li><a href="#">社会科学</a></li>
                        </ul>


                        <ul class="clearfix">
                            <li><a href="#">经管励志</a></li>
                            <li><a href="#">金融与投资</a></li>
                            <li><a href="#">管理</a></li>
                            <li><a href="#">励志与成功</a></li>
                            <li><a href="#">经济</a></li>
                        </ul>


                        <ul class="clearfix">
                            <li><a href="#">生活</a></li>
                            <li><a href="#">健康与保健</a></li>
                            <li><a href="#">家庭与育儿</a></li>
                            <li><a href="#">旅游</a></li>
                            <li><a href="#">烹饪美食</a></li>
                        </ul>


                        <ul class="clearfix">
                            <li><a href="#">科技</a></li>
                            <li><a href="#">工业技术</a></li>
                            <li><a href="#">科普读物</a></li>
                            <li><a href="#">建筑</a></li>
                            <li><a href="#">医学</a></li>
                            <li><a href="#">科学与自然</a></li>
                            <li><a href="#">计算机与互联网</a></li>
                            <li><a href="#">电子通信</a></li>
                        </ul>

                        <ul class="clearfix">
                            <li><a href="#">教育</a></li>
                            <li><a href="#">工业技术</a></li>
                            <li><a href="#">科普读物</a></li>
                            <li><a href="#">建筑</a></li>
                            <li><a href="#">医学</a></li>
                            <li><a href="#">科学与自然</a></li>
                            <li><a href="#">计算机与互联网</a></li>
                            <li><a href="#">电子通信</a></li>
                        </ul>

                        <ul class="clearfix">
                            <li><a href="#">艺术与收藏</a></li>
                            <li><a href="#">工业技术</a></li>
                            <li><a href="#">科普读物</a></li>
                            <li><a href="#">建筑</a></li>
                            <li><a href="#">医学</a></li>
                            <li><a href="#">科学与自然</a></li>
                            <li><a href="#">计算机与互联网</a></li>
                            <li><a href="#">电子通信</a></li>
                        </ul>

                        <ul class="clearfix">
                            <li><a href="#">其他</a></li>
                            <li><a href="#">工业技术</a></li>
                            <li><a href="#">科普读物</a></li>
                            <li><a href="#">建筑</a></li>
                            <li><a href="#">医学</a></li>
                            <li><a href="#">科学与自然</a></li>
                            <li><a href="#">计算机与互联网</a></li>
                            <li><a href="#">电子通信</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a>电脑</a>
                    <span>/</span>
                    <a>办公</a>

                    <!--   二级菜单,li有padding,子孙会让出padding从content开始-->
                    <div class="second-menu" >
                        <ul class="clearfix">
                            <li>
                                <a href="#">电子书刊2</a>
                            </li>
                            <li><a href="#">电子书2</a></li>
                            <li><a href="#">网络原创2</a></li>
                            <li><a href="#">数字杂志2</a></li>
                            <li><a href="#">多媒体图书2</a></li>
                        </ul>

                        <ul class="clearfix">
                            <li>
                                <a href="#">音像2</a>
                            </li>
                            <li><a href="#">音乐2</a></li>
                            <li><a href="#">影视2</a></li>
                            <li><a href="#">教育音像2</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a>家具</a>
                    <span>/</span>
                    <a>家居</a>
                    <span>/</span>
                    <a>家装</a>
                    <span>/</span>
                    <a>厨具</a>

                    <!--   二级菜单,li有padding,子孙会让出padding从content开始-->
                    <div class="second-menu">
                        <ul class="clearfix">
                            <li>
                                <a href="#">电子书刊3</a>
                            </li>
                            <li><a href="#">电子书3</a></li>
                            <li><a href="#">网络原创3</a></li>
                            <li><a href="#">数字杂志3</a></li>
                            <li><a href="#">多媒体图书3</a></li>
                        </ul>

                        <ul class="clearfix">
                            <li>
                                <a href="#">音像3</a>
                            </li>
                            <li><a href="#">音乐3</a></li>
                            <li><a href="#">影视3</a></li>
                            <li><a href="#">教育音像3</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a>男装</a>
                    <span>/</span>
                    <a>女装</a>
                    <span>/</span>
                    <a>童装</a>
                    <span>/</span>
                    <a>内衣</a>
                </li>
                <li>
                    <a>美妆</a>
                    <span>/</span>
                    <a>个护清洁</a>
                    <span>/</span>
                    <a>宠物</a>
                </li>
                <li>
                    <a>女鞋</a>
                    <span>/</span>
                    <a>箱包</a>
                    <span>/</span>
                    <a>钟表</a>
                    <span>/</span>
                    <a>珠宝</a>
                </li>
                <li>
                    <a>男鞋</a>
                    <span>/</span>
                    <a>运动</a>
                    <span>/</span>
                    <a>户外</a>
                </li>
                <li>
                    <a>房产</a>
                    <span>/</span>
                    <a>汽车</a>
                    <span>/</span>
                    <a>骑车用品</a>
                </li>
                <li>
                    <a>母婴</a>
                    <span>/</span>
                    <a>玩具乐器</a>
                </li>
                <li>
                    <a>食品</a>
                    <span>/</span>
                    <a>酒类</a>
                    <span>/</span>
                    <a>生鲜</a>
                    <span>/</span>
                    <a>特产</a>
                </li>
                <li>
                    <a>艺术</a>
                    <span>/</span>
                    <a>礼品鲜花</a>
                    <span>/</span>
                    <a>农资绿植</a>
                </li>
                <li>
                    <a>医药保健</a>
                    <span>/</span>
                    <a>计生情趣</a>
                </li>

                <li>
                    <a>图书</a>
                    <span>/</span>
                    <a>文娱</a>
                    <span>/</span>
                    <a>教育</a>
                    <span>/</span>
                    <a>电子书</a>
                </li>
                <li>
                    <a>机票</a>
                    <span>/</span>
                    <a>酒店</a>
                    <span>/</span>
                    <a>旅游</a>
                    <span>/</span>
                    <a>生活</a>
                </li>
                <li>
                    <a>众筹</a>
                    <span>/</span>
                    <a>白条</a>
                    <span>/</span>
                    <a>保险</a>
                    <span>/</span>
                    <a>企业金融</a>
                </li>
                <li>
                    <a>安装</a>
                    <span>/</span>
                    <a>维修</a>
                    <span>/</span>
                    <a>清洗</a>
                    <span>/</span>
                    <a>二手</a>
                </li>
            </ul>
        </div>
        <div class="mid-content leftfix">
            <img src="./images/banner主图.png" width="690px" height="458px">
        </div>
        <div class="right-content leftfix">
            <div class="quickInfo">
                <div class="info-title clearfix">
                    <span class="leftfix">商品快报</span>
                    <a class="rightfix">更多 ></a>
                </div>

                <div class="info-link clearfix">
                    <ul>
                        <li><a>[特惠] 毛衣+直筒裤,才是YYDS。</a></li>
                        <li><a>[特惠] 超大容量的满足来自干撒子。</a></li>
                        <li><a>[特惠] 每日一件，衣柜满到塞不下。</a></li>
                        <li><a>[特惠] 媳妇儿再买，我就疯给他看。</a></li>
                    </ul>
                </div>
            </div>
            <div class="picNav">
            <ul class="pic-list clearfix">
                <li>
                    <div class="pic-picDiv"></div>
                    <div class="pic-spanDiv" ><span>话费</span></div>
                </li>
                <li>
                    <div class="pic-picDiv"></div>
                    <div class="pic-spanDiv" ><span>火车票</span></div>
                </li>
                <li>
                    <div class="pic-picDiv"></div>
                    <div class="pic-spanDiv" ><span>加油卡</span></div>
                </li>
                <li>
                    <div class="pic-picDiv"></div>
                    <div class="pic-spanDiv" ><span>白条</span></div>
                </li>
            </ul>
                <ul class="pic-list clearfix">
                    <li>
                        <div class="pic-picDiv"></div>
                        <div class="pic-spanDiv" ><span>电影票</span></div>
                    </li>
                    <li>
                        <div class="pic-picDiv"></div>
                        <div class="pic-spanDiv" ><span>酒店</span></div>
                    </li>
                    <li>
                        <div class="pic-picDiv"></div>
                        <div class="pic-spanDiv" ><span>理财</span></div>
                    </li>
                    <li>
                        <div class="pic-picDiv"></div>
                        <div class="pic-spanDiv" ><span>机票</span></div>
                    </li>
                </ul>
                <ul class="pic-list clearfix">
                    <li>
                        <div class="pic-picDiv"></div>
                        <div class="pic-spanDiv" ><span>礼品卡</span></div>
                    </li>
                    <li>
                        <div class="pic-picDiv"></div>
                        <div class="pic-spanDiv" ><span>彩票</span></div>
                    </li>
                    <li>
                        <div class="pic-picDiv"></div>
                        <div class="pic-spanDiv" ><span>游戏</span></div>
                    </li>
                    <li>
                        <div class="pic-picDiv"></div>
                        <div class="pic-spanDiv" ><span>众筹</span></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="miaosha">
    <div class="container clearfix">
        <div class="leftfix msbox firstPic" id="po"></div>
        <div class="leftfix msbox"></div>
        <div class="leftfix msbox"></div>
        <div class="leftfix msbox"></div>
        <div class="leftfix msbox"></div>
    </div>
</div>

<div class="floor">
    <div class="container clearfix">
        <div class="floor-up clearfix">
            <div class="floor-up-left leftfix">家用电器</div>
            <div class="floor-up-right rightfix">
                <ul class="floor-up-list clearfix">
                    <li><a>热门</a></li>
                    <li><a>大家电</a></li>
                    <li><a>生活电器</a></li>
                    <li><a>厨房电器</a></li>
                    <li><a>应季电器</a></li>
                    <li><a>空气/净水</a></li>
                    <li><a>高端电器</a></li>
                </ul>
            </div>
        </div>

        <div class="floor-info clearfix">
            <div class="item item1">
                <div class="item1-up clearfix">
                    <ul class="list-left leftfix">
                        <li><a href="#">节能补贴</a></li>
                        <li><a href="#">空气净化器</a></li>
                        <li><a href="#">滚筒洗衣机</a></li>
                    </ul>
                    <ul class="list-right rightfix">
                        <li><a href="#">4K电视</a></li>
                        <li><a href="#">IH电饭煲</a></li>
                        <li><a href="#">电热水器</a></li>
                    </ul>
                </div>
                <div class="item1-down"></div>
            </div>
            <div class="item item2"></div>
            <div class="item item3">
                <div class="item3-up"></div>
                <div class="item3-down"></div>
            </div>
            <div class="item item4"></div>
            <div class="item item5">
                <div class="item5-up"></div>
                <div class="item5-down"></div>
            </div>
        </div>
    </div>
</div>

<div class="floor">
    <div class="container clearfix">
        <div class="floor-up clearfix">
            <div class="floor-up-left leftfix">家用电器</div>
            <div class="floor-up-right rightfix">
                <ul class="floor-up-list clearfix">
                    <li><a>热门</a></li>
                    <li><a>大家电</a></li>
                    <li><a>生活电器</a></li>
                    <li><a>厨房电器</a></li>
                    <li><a>应季电器</a></li>
                    <li><a>空气/净水</a></li>
                    <li><a>高端电器</a></li>
                </ul>
            </div>
        </div>

        <div class="floor-info clearfix">
            <div class="item item1">
                <div class="item1-up clearfix">
                    <ul class="list-left leftfix">
                        <li><a href="#">节能补贴</a></li>
                        <li><a href="#">空气净化器</a></li>
                        <li><a href="#">滚筒洗衣机</a></li>
                    </ul>
                    <ul class="list-right rightfix">
                        <li><a href="#">4K电视</a></li>
                        <li><a href="#">IH电饭煲</a></li>
                        <li><a href="#">电热水器</a></li>
                    </ul>
                </div>
                <div class="item1-down"></div>
            </div>
            <div class="item item2"></div>
            <div class="item item3">
                <div class="item3-up"></div>
                <div class="item3-down"></div>
            </div>
            <div class="item item4"></div>
            <div class="item item5">
                <div class="item5-up"></div>
                <div class="item5-down"></div>
            </div>
        </div>
    </div>
</div>

<div class="footer">
    <div class="container">
        <div class="footer-up clearfix">
            <ul class="foot-list list1">
                <li><a>购物指南</a></li>
                <li><a>购物流程</a></li>
                <li><a>会员介绍</a></li>
                <li><a>生活旅行</a></li>
                <li><a>常见问题</a></li>
                <li><a>大家电</a></li>
                <li><a>联系客服</a></li>
            </ul>

            <ul class="foot-list list2">
                <li><a>配送方式</a></li>
                <li><a>上门自提</a></li>
                <li><a>211限时达</a></li>
                <li><a>配送服务查询</a></li>
                <li><a>配送费收取标准</a></li>
            </ul>
            <ul class="foot-list list3">
                <li><a>支付方式</a></li>
                <li><a>货到付款</a></li>
                <li><a>在线支付</a></li>
                <li><a>分期付款</a></li>
                <li><a>公司转账</a></li>
            </ul>

            <ul class="foot-list list4">
                <li><a>售后服务</a></li>
                <li><a>售后政策</a></li>
                <li><a>价格保护</a></li>
                <li><a>退款说明</a></li>
                <li><a>返修/退换货</a></li>
                <li><a>取消订单</a></li>
            </ul>

            <ul class="foot-list list5">
                <li><a>特色服务</a></li>
                <li><a>夺宝岛</a></li>
                <li><a>DIY装机</a></li>
                <li><a>延保服务</a></li>
                <li><a>京东E卡</a></li>
                <li><a>京东通信</a></li>
                <li><a>京鱼智能座</a></li>
            </ul>
            <div class="foot-div leftfix">
                <p>自营覆盖县区<p>
                <p>京尚品汇已向全国2661个区县提供自营配送服务，支付货到付款，POS机刷卡和售后上门服务。<p>
                <p>查看详情。<p>

            </div>
        </div>
        <div class="footer-down">
            <ul class="footer-down-list clearfix">
                <li><a>关于我们</a></li>
                <li><a>联系我们</a></li>
                <li><a>联系客服</a></li>
                <li><a>合作招商</a></li>
                <li><a>商家帮助</a></li>
                <li><a>营销中心</a></li>
                <li><a>手机京东</a></li>
                <li><a>友情链接</a></li>
                <li><a>销售联盟</a></li>
                <li><a>隐私政策</a></li>
            </ul>
            <p>京ICP备案12345678901</p>
        </div>
    </div>
</div>
</body>

<script>
    document.getElementById('po').addEventListener('click',function () {
        alert('点击')
    })
</script>
</html>

